<template>
  <div class="outerbox">
    <el-row class="container">
      <el-col :span="24">
        <div class="goBackIndex my_text_right">
          <router-link to="/" class="font-color">返回首页</router-link>
        </div>
        <div class="inner-opacity-box">
          <div class="inner-content-box">
            <div class="content-title my_text_center">
              <span>账号注册</span>
            </div>
            <div class="content-login my_text_center">
              <p>已是彩盟计划用户？
                <router-link to="/" class="loginnow">立即登录</router-link>
              </p>
            </div>
            <div class="content-register-lists">
              <!-- 输入用户名 -->
              <div class="my-lists-items">
                <span class="left-icon my_text_center">
                  <img class="left-icon-pic" src="../assets/imgs/register-phone-icon.png" alt="">
                </span>
                <input class="right-input" type="text" placeholder="请输入你的用户名" v-model.lazy="telNum" @change="telNumInput" maxlength="11">
                <img v-show="isTel" class="ok-pic" src="../assets/imgs/register-ok-pic.png" alt="">
                <span v-text="isTelErr" class="warning"></span>
              </div>
              <!-- 获取验证码 -->
              <!-- <div class="my-lists-items">
                <input class="left-input" type="text" placeholder="请输入验证码" v-model.lazy="verifiCode" @change="verigicodeInput">
                <span v-text="verificodeTips" class="right-text my_text_center getCode" @click="getVerificode"></span>
                <img v-show="isVerificode" class="ok-pic" src="../assets/imgs/register-ok-pic.png" alt="">
                <span v-show="isSendverificode" class="warning">验证码已发送</span>
                <span v-show="isVerificodeErr" class="warning">验证码错误，请重新输入</span>
              </div> -->
              <!-- 输入密码 -->
              <div class="my-lists-items">
                <span class="left-icon my_text_center">
                  <img class="left-icon-pic" src="../assets/imgs/register-pwd-icon.png" alt="">
                </span>
                <input class="right-input" type="text" placeholder="请输入你的密码" v-model.lazy="userPwd" @change="userPwdInput" maxlength="16">
                <img v-show="isPwd" class="ok-pic" src="../assets/imgs/register-ok-pic.png" alt="">
                <span v-show="isPwdErr" class="warning">注册密码必须为6-16位数字和字母的组合</span>
              </div>
              <!-- 再次输入密码 -->
              <div class="my-lists-items">
                <span class="left-icon my_text_center">
                  <img class="left-icon-pic" src="../assets/imgs/register-pwd-icon.png" alt="">
                </span>
                <input class="right-input" type="text" placeholder="请再次输入密码" v-model.lazy="pwdAgain" @change="pwdAgainInput">
                <img v-show="isPwdAgain" class="ok-pic" src="../assets/imgs/register-ok-pic.png" alt="">
                <span v-show="isPwdAgainErr" class="warning">两次输入密码不一致，请重新输入</span>
              </div>
              <!-- 设置密保问题 -->
              <div class="my-lists-items">
                <span class="left-icon my_text_center">
                  <img class="left-icon-pic" src="../assets/imgs/register-question-icon.png" alt="">
                </span>
                <selection class="right-input" @pwdQuestionChange="pwdQuestionChoose" :isValueNull='parentIsValueNull'></selection>
                <img v-show="isPwdQuestion" class="ok-pic" src="../assets/imgs/register-ok-pic.png" alt="">
                <span class="question-intro">方便找回密码</span>
              </div>
              <!-- 密保问题答案 -->
              <div class="my-lists-items">
                <span class="left-icon my_text_center">
                  <img class="left-icon-pic" src="../assets/imgs/register-question-icon.png" alt="">
                </span>
                <input class="right-input" type="text" placeholder="请填写20字以内的答案" v-model.lazy="pwdAnswer" @change="pwdAnswerInput" maxlength="20">
                <img v-show="isPwdAnswer" class="ok-pic" src="../assets/imgs/register-ok-pic.png" alt="">
                <span v-show="isPwdAnswerErr" class="warning">答案超出20个字，请重新输入</span>
              </div>
              <!-- 阅读协议的checkbox -->
              <div class="my-lists-items">
                <CheckBox @checkBoxChecked="parentChecked" :isCheckedFalse='parentIsCheckedFalse'></CheckBox>
                <span v-show="showreadFile" class="warning">是否阅读并接受《服务协议》</span>
              </div>
              <!-- 注册按钮 -->
              <div class="my-lists-items">
                <button class="register-btn" @click="userRegisterSubmit">注册</button>
                <span v-show="isRegisterSucc" class="warning">注册成功</span>
                <span v-show="isRegisterLose" class="warning">{{registerLoseVar}}</span>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Selection from "../components/Selection";
import CheckBox from "../components/CheckBox";

export default {
  data() {
    return {
      isTel: false,
      telNum: "",
      isTelErr: "",
      // isVerificode: false,
      // verifiCode: "",
      // verificodeTips: "获取验证码",
      // intervalTag: true,
      // isSendverificode: false,
      // isVerificodeErr: false,
      isPwd: false,
      userPwd: "",
      isPwdErr: false,
      isPwdAgain: false,
      pwdAgain: "",
      isPwdQuestion: false,
      pwdQuestionVar: null,
      isPwdAgainErr: false,
      isPwdAnswer: false,
      pwdAnswer: "",
      // pwdQustions: [],
      isPwdAnswerErr: false,
      isCheckedBox: false,
      isRegisterSucc: false,
      isRegisterLose: false,
      registerLoseVar: "",
      parentIsValueNull: false,
      parentIsCheckedFalse: false,
      showreadFile:false
    };
  },
  components: {
    Selection,
    CheckBox
  },
  watch: {
    $route() {
      this.telNum = "";
      this.userPwd = "";
      this.pwdAgain = "";
      this.parentIsValueNull = true;
      this.pwdAnswer = "";
      this.isTel = false;
      this.isPwd = false;
      this.isPwdAgain = false;
      this.isPwdAnswer = false;
      this.isPwdQuestion = false;
      this.isPwdAgainErr = false;
      this.parentIsCheckedFalse = true;
      this.isRegisterSucc = false;
      this.isRegisterLose = false;
    },
    isCheckedBox(){
      if(this.isCheckedBox == true){
        this.showreadFile = false;
      }
    }
  },
  methods: {
    telNumInput() {
      // let regTel = /^0?(13|14|15|18|17)[0-9]{9}$/gi;
      let regUserName = /^([A-Za-z0-9_]{2,11})$/gi;
      // let resTel = regTel.test(this.telNum);
      let resUserName = regUserName.test(this.telNum);
      // if (resTel && resUserName) {
      if (resUserName) {
        this.isTel = true;
        this.isTelErr = "";
      } else {
        this.isTel = false;
        this.isTelErr = "用户名必须为2-11位字符";
      }
    },
    // getVerificode() {
    //   if (this.intervalTag) {
    //     this.intervalTag = false;
    //     let secondNum = 60;
    //     let tips = this.verificodeTips;
    //     this.verificodeTips = secondNum;
    //     let t = setInterval(() => {
    //       secondNum--;
    //       if (secondNum == 0) {
    //         this.verificodeTips = "重新发送";
    //         clearInterval(t);
    //         this.intervalTag = true;
    //         this.isSendverificode = false;
    //       } else {
    //         this.verificodeTips = secondNum;
    //         this.isSendverificode = true;
    //       }
    //     }, 1000);
    //   }
    // },
    // verigicodeInput() {
    //   let reg = /^[0-9]{6}$/gi;
    //   let res = reg.test(this.verifiCode);
    //   if (res) {
    //     this.isVerificode = true;
    //     this.isVerificodeErr = false;
    //   } else {
    //     this.isVerificode = false;
    //     this.isVerificodeErr = true;
    //   }
    // },
    userPwdInput() {
      let reg = /^((?!^\d+$)(?!^[a-zA-Z]+$)[A-Za-z0-9]{6,16})$/gi;
      let res = reg.test(this.userPwd);
      if (res) {
        this.isPwd = true;
        this.isPwdErr = false;
      } else {
        this.isPwd = false;
        this.isPwdErr = true;
      }
    },
    pwdAgainInput() {
      if (this.pwdAgain === this.userPwd && this.pwdAgain != "") {
        this.isPwdAgain = true;
        this.isPwdAgainErr = false;
      } else {
        this.isPwdAgain = false;
        this.isPwdAgainErr = true;
      }
    },
    pwdAnswerInput() {
      let res = this.getBLen(this.pwdAnswer) / 2 < 20; //限制字数少于20字
      if (res) {
        this.isPwdAnswer = true;
        this.isPwdAnswerErr = false;
      } else {
        this.isPwdAnswer = false;
        this.isPwdAnswerErr = true;
      }
    },
    pwdQuestionChoose(data) {
      if (data) {
        this.isPwdQuestion = true;
      }
      this.pwdQuestionVar = data;
    },
    parentChecked(data) {
      this.isCheckedBox = data;
    },
    userRegisterSubmit() {
      if(this.isCheckedBox == false){
        this.showreadFile = true;
      }
      if (
        this.isCheckedBox &&
        this.telNum &&
        this.userPwd &&
        this.pwdQuestionVar &&
        this.pwdAnswer &&
        this.pwdAgain &&
        (!this.isPwdAgainErr)
      ) {
        this.axios
          .post("user/postUserRegister", {
            user_name: this.telNum, //用户名
            password: this.userPwd, //密码
            repeat_password: this.userPwd, //确认密码
            question_id: this.pwdQuestionVar, //问题id
            answer: this.pwdAnswer //问题答案
          })
          .then(res => {
            if (res.data.status) {
              this.isRegisterSucc = true;
              this.telNum = "";
              this.userPwd = "";
              this.pwdAgain = "";
              this.parentIsValueNull = true;
              this.pwdAnswer = "";
              this.isTel = false;
              this.isPwd = false;
              this.isPwdAgain = false;
              this.isPwdAnswer = false;
              this.isPwdQuestion = false;
              this.parentIsCheckedFalse = true;
              setTimeout(() => {
                this.$router.push("/");
              }, 1000);
            } else {
              this.isRegisterLose = true;
              this.registerLoseVar = res.data.message;
              // this.log(res.data.message);
            }
          })
          .catch(err => {
            this.log(err);
          });
      } else if (!this.pwdAgain) {
        this.isPwdAgainErr = true;
      }
    },
    getBLen(str) {
      //计算字符串长度
      if (str == null) return 0;
      if (typeof str != "string") {
        str += "";
      }
      return str.replace(/[^\x00-\xff]/g, "ab").length;
    }
  }
};
</script>

<style lang="less" scoped>
@import url(../assets/css/registerCenter.less);
</style>


